<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>微信接口-列表</title>
		<meta name="Keywords" content="微信开发,微信支付,微信demo,demo下载">
		<meta name="description" content="微信开发">
		<%-- <jsp:include page="iconfont/iconfont.jsp" flush="true"/> --%>
		<jsp:include page="common/common_head.jsp"></jsp:include>
		<script type="text/javascript" src="<c:url value='/resources/js/user.js'/>"></script>
		<script type="text/javascript" src="<c:url value='/resources/js/gn_utils.js'/>"></script>
		<style type="text/css">
		    body{background:#f7fafc;font-size:16px;}
			h1,h2,h3,h4,label{margin:10px 0;}
			.pay-amount,.i-itm li p{margin:10px 0;}
			/** *swiper */
			 .swiper-container{width:1200px;height:400px;margin:100px auto 20px;background:#ccc;}
			.swiper-slide{background-size:cover;text-align:center;font-size:18px;height:400px;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;}
			.bk{z-index:-1;width:100%;height:490px;position:absolute;top:72px;background:url(<c:url value='/resources/images/bg5.jpg'/>) top center no-repeat;}
			.layui-layer5{background:#fff;padding:30px 20px;} 
			.shadow-b{width:100%;height:490px;position:absolute;background:rgba(84,84,84,0.6);top:72px;}
			#layui-layer2{width: initial!important;top: 50px!important;left: 34%!important;}
					
		</style>
	</head>
<body>
<!-- S TO TOP-->
<div class="scroll" style="display: block;">
	<a href="#" class="s_btn"></a>
</div>
<!-- E TO TOP -->
<div id="vwrap" v-cloak>
	<!-- 顶部背景 -->
	 <div class="bk"></div>
	 <!-- <div class="shadow-b"></div> -->
	 <input v-model="login_token" type="hidden" value="${oatoken_}"/>
     <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><a href="###"><img alt="" width="1200" height="450" src="<c:url value='/resources/images/sucai/1617.jpg'/>"></a></div>
            <div class="swiper-slide"><a href="###"><img alt="" width="1200" height="450" src="<c:url value='/resources/images/sucai/66.jpg'/>"></a></div>
            <div class="swiper-slide"><a href="###"><img alt="" width="1200" height="450" src="<c:url value='/resources/images/sucai/77.png'/>"></a></div>
        </div>
        <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
		 <div class="swiper-pagination"></div>
    </div>

    <!-- Swiper JS -->
	<script type="text/javascript" src="<c:url value='/resources/js/swiper/swiper-3.4.0.jquery.min.js'/>"></script>
    <script>
   var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
	    paginationBulletRender: function (index, className) {
		  return '<span style="width: 30px;height: 4px;display: inline-block;border-radius: 10%;" class="' + className + '"></span>';
	    },
        spaceBetween: 0,
        centeredSlides: true,
        autoplay: 3000,
		loop:true,
		freeMode : true,
		//freeModeMomentum : false,
		freeModeSticky : false,
        autoplayDisableOnInteraction: false
    });

   var swiper1 = new Swiper('.swiper-container1', {
        //pagination: '.swiper-pagination1',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
    });
    </script>


<!-- 共用头部 -->
	<jsp:include page="common/common.jsp"></jsp:include>
	<style type="text/css">
		.i-itm li:nth-child(1){float:left;background:#459ae9;color:#fff;width:100%;}
		.i-itm li:nth-child(2){background:#0A8409;float:right;color:#fff;width:70%;}
		.i-itm li:nth-child(3){background:#60D295;float:left;color:#fff;width:33.33333%;padding-top:2px;}
		.i-itm li p{text-align:center;}
		.list-box>.items{width:80%;margin:0 auto;position:relative;}
		.i-itm li p span{position:relative;}
		.i-itm li p .marker{position:absolute;display:block;width:6px;height:6px;top:-4px;right:-9px;background:#F53F3F;border-radius:50%;}
		.ico-comm-h{font-size:1.8em;}
		.if-reply-shot{position:absolute;width:7px;height:7px;background:#E22424;border-radius:50%;margin:0;top:4px;right:45%;}
		.s1{background:green;}
		.s2{background:red;}
		.s3{background:pink;}
		.l-count i{vertical-align: text-top;}
		
		.jiekou-search{text-align:center;background:-webkit-linear-gradient(left,red,blue);background:-o-linear-gradient(right,red,blue);
		background:-moz-linear-gradient(right,red,blue);background:linear-gradient(to right,#2CA43A,#F8FC18);}
		.jiekou-search>input{width:371.5px;height:36px;margin:20px 0;border:0;padding-left:15px;}
		.search-button{display: inline-block;background-color: #f15044;color: #fff;padding: 6px 12px;}
		.search-button i{}
	</style>
	
	<div class="list-box">
		<div class="items">
			 <%-- <div class="m-wrap" style="position: absolute;right: -130px;top: 0;">
			  	<div class="comment comm-msg" title="评论">
			  		<a style="color:#fff;display: inline-block;width: 100%;" target="_blank" href="<c:url value='comment.htm'/>">
			  			<i style="padding: 0 2px;" class="iconfont icon-pinglun"></i>评论(<em style="font-style:normal;color:#F19723;">10</em>)
			  		</a>
			  	</div>
			    <div class="favorite comm-msg" style="" title="我的收藏">
			    	<a style="color:#fff;display: inline-block;width: 100%;" href="my_favorites.htm">
			    		<i style="padding: 0 2px;" class="iconfont icon-shoucang1"></i>我的收藏(<em style="font-style:normal;color:#F19723;">10</em>)
			    	</a>
			    </div>
			    <div class="messages comm-msg" style="position: relative;" title="留言">
			    	<a style="color:#fff;display: inline-block;width: 100%;" href="#message">
			    		<i style="padding: 0 2px;" class="iconfont icon-liuyanicon"></i>留言
			    	</a>
			    	<div class="if-reply-shot"></div>
			    </div>
			 </div> --%>

			<ul class="i-itm">
				<%-- <li style="background-image: url('<c:url value="/resources/images/mini_bg04.jpg"/>');background-size: contain;">
					<a target="_blank" href="<c:url value='/user/xcx_market.htm'/>" style="color:#fff;">
						<p>
							<i class="ico-comm-h iconfont icon-daima"></i>
							<span style="font-size: 28px">2<i class="marker"></i></p></span>
						<p>微信小程序商店</p>
					</a>
				</li> --%>
				<li v-if="login_token=='login_ok'" style="background-image: url('<c:url value="/resources/images/mini_bg01.jpg"/>');background-size: contain;">
				<a href="javascript:;" style="color:#fff;">
						<p>
							<i class="ico-comm-h iconfont icon-jiekou1"></i>
							<span style="font-size: 35px;color:#333;" class="comm-read-common">{{goodsCount}}<i class="marker"></i></p></span>
						<p>个接口</p>
					</a>
				</li>
				<%-- <li style="background-image: url('<c:url value="/resources/images/mini_bg05.jpg"/>');background-size: contain;">
					<a href="<c:url value='/article_list.htm'/>" target="_blank" style="color:#fff;">
						<p style="font-size: 28px">
							<i style="font-size: 1.5em;" class="iconfont icon-iconfontfilesfill"></i>
							<span style="font-size: 28px">5<i class="marker"></i></p></span>
						</p>
						<p>篇文章</p>
					</a>
				</li> --%>
				<div style="clear:both;"></div>
			</ul>
			
			<div class="jiekou-search">
				<input @keyup.enter="searchJiekou" placeholder="输入接口名称" v-model="searchCnt"/><a class="search-button" @click="searchJiekou" href="###"><i class="iconfont icon-sousuo1"></i></a>
			</div>
			
			<style type="text/css">
				.i-lists{border:1px solid #E4E3E3;}
				.i-lists li{padding:0 10px;border-bottom:1px solid #E4E3E3;}
				.i-lists li:hover{background: rgb(244, 245, 249);}
				.i-lists li:last-child{border:none;}
				.i-lists li:nth-child(1){padding:8px 20px;}
				.i-lists li a,span{display:inline-block;}
				.i-lists li .rightcomm{display:block;float:right;margin-top:10px;}
				.i-lists li .i-name{color:#09A51D;}
				.i-lists li:after{content:"020";display:block;height:0;clear:both;visibility:hidden;}
				.i-lists li .new{display:inline-block;width:21px;height:14px;background:url(<c:url value='/resources/images/new-ico.png'/>) 0 -3428px no-repeat;font-size:12px;color:#fff;padding:0 2px;margin:6px 0 0 5px;text-align:center;}
				.getpwd{padding:0 20px;color:#29BB6D;}
				.pay-amount{color:red;margin-right:20px;}
				.icon-qian{font-size:1.3em;}
				.more{margin-top:10px;}
				.more a{ width:100%;display:inline-block;background:#FFA500;color:#fff;text-align:center;padding:8px 0;transition:.4s;}
				.more a:hover{background:#2EA907;color:#fff;}	
				.c-1-comm{font-size: 13px;color: red;font-family: serif;}	
				.rightcomm span{margin-left: 2px;}
				.pay-amount{margin-bottom: 14px; margin-right: 5px;vertical-align: middle;}	
				.pay-amount svg{height:30px;width:20px;height: 35px;width: 25px;}	
			</style>
			<style>
				thead tr th,tbody tr td{text-align:center;}
				tbody tr td{padding: 0 5px;}
				.i-name:hover{color:red;}
				.goodsname{width:90%; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}
				.goods-img img{border-radius:4px;}
				table{border: 1px solid #D6D6D6;}
				.jiekougg{background: #eee;padding: 4px 5px;border-left: 1px solid #D6D6D6;border-right: 1px solid #D6D6D6;}
				.new-goods{height:28px;width:28px;position:absolute;right:0;top:0;}
				.jiekou-gonggao{color: rgba(216, 142, 63, 0.91);padding: 0 10px;}
			</style>
				<div class="jiekougg">
					<label>接口发布公告</label>
					<!-- <span class="jiekou-gonggao">北京撒谎法交流，不来看；了开始发胖</span> -->
				</div>
				<table border="1" style="width: 100%;">
					  <thead>
					    <tr style="height: 36px;">
					      <th>#</th>
					      <th>头像</th>
					      <th>状态</th>
					      <th>价格(元)</th>
					      <th>商品名</th>
					      <th>链接地址</th>
					      <th>下载密码</th>
					      <th>###</th>
					    </tr>
					  </thead>
					
					  <tbody>
					  <template v-for="goods in goodsList">
					  	<tr v-show="goods.shelfState == 0" :class="$index%2 === 0 ? 'color_eee' : 'color_fff'">
					       <td  width="5%">{{$index + 1}}</td>
					       <td  width="5%">
					      	<span class="goods-img"><img width="30" height="30" :src="goods.goodsImg"/></span>
					       </td>
					       <td  width="7%">
					      	<span class="pay-amount">
								<template v-if="goods.state==1">
									<svg class="icon" aria-hidden="true">
									  <use xlink:href="#icon-yuan"></use>
									</svg>
								</template>
								<template v-else>
									<span class="free-goods">免费</span>
								</template>
							</span>
					       </td>
					      <td  width="7%">
					      	{{goods.sellPrice}}
					      </td>
					      <td style="text-align: left;position:relative;" width="32%">
							<svg v-show="goods.isNew==1" class="icon new-goods" aria-hidden="true">
							  <use xlink:href="#icon-xin"></use>
							</svg>
					      	<a href="<c:url value='/goods/{{goods.id}}'/>" class="i-name" @click="updateGoodsReadCount(goods.id)">{{goods.goodsName}}</a><i class="new"></i>
					      </td>
					      <td  width="35%">
					      	<span class="linkpwd" title="{{goods.linkPath}}">{{goods.linkPath}}</span>
					      </td>
					      <td width="10%">
					      	
							<template v-if="login_token=='login_ok'">
								<template v-if="goods.state==1">
									<a href="javascript:;" @click="showPwd" class="free-goods">获取密码</a>
								</template>
								<template v-else>
									<span class="getpwd">{{goods.linkPwd}}</span>
								</template>
							</template>
							<template v-else>
								<a href="javascript:;" @click="showPwd" class="free-goods">获取密码</a>
							</template>
					      </td>
					      <td class="l-count">
					      	<template v-if="goods.state==1">
								<i style="color:red;" class="iconfont icon-ai-hongbao"></i><span style="color:#F99310" class="comm-read-common" title="购买人数">111</span>
							</template>
							<template v-else>
								<i style="color:green;" class="iconfont icon-yuedu1"></i><span style="color:#F99310" class="comm-read-common" title="查看数">{{goods.readCount}}</span>
							</template>
					      	
					      </td>
					    </tr>
					  </template>
					    
					  </tbody>
					</table>
			
			
			
			<!-- <div class="more"><a href="###">更多接口</a></div> -->
			<div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
			<!--<div id="Searchresult">分页初始化完成后这里的内容会被替换。</div>-->

		</div>
		<style type="text/css">
			.u-message{ text-align:center;width:800px;margin:20px auto 0;background:#FFFFFF;padding:20px 200px;}
			.u-message textarea{outline:none;padding:8px 31px;font-family:"微软雅黑";border:1px solid orange;resize:none;}
			.u-message .btn-box{text-align:right;}
			.u-message .ok-btns{display:block;padding:6px 20px;background:#FFA500;color:#fff;float:right;}
			.u-message .ok-btns:hover{background:#cc1717;}
			.text-box{position:relative;}
			.layui-layer-btn .layui-layer-btn0{border-color:#0FB557;background-color:#0FB557;color:#fff;padding:3px 35px;}
			.layui-layer-btn{text-align:center;}
			.word-limit{position:absolute;right:30px;bottom:8px;margin:0;color:#ccc;}
			.message-cnt-area{border:2px dashed #EAD69B;padding:0 12px;margin-top:20px;position:relative;}
			.message-cnt-area .msg-cnt{padding:0 34px;text-indent:2em;text-align:left;color: #ADADAD;}
			.my-message-info{border-bottom:1px solid #EFEFEF;}
			.reply-status{position:absolute;top:0;right:0;padding:4px 6px;background:#ADADAD;color:#fff;margin:0;}
			.t_face_con{background:#fff;box-shadow:0px 2px 6px 0px #C77A38;position:absolute;left:0;top:149px;z-index:1;}
			.t_face_con ul li{list-style:none;float:left;margin:2px;cursor:pointer;}
			.t_face{position:absolute;bottom:5px;left:12px;}
			.write-message{border:1px solid #EFA760;height:150px;outline:none;text-align:left;text-indent:1em;padding-top:6px;}
			.my-title .icon{ width:30px;height:40px;}						

		</style>
		<div class="u-message">
			<a name="message"></a>
			<div>
				<h2><i style="padding: 0 10px;font-size: 1.3em;" class="iconfont icon-liuyanicon"></i>我要留言</h2>
				<template v-if="login_token=='login_ok'">
					<div style="float: right;"><span class="comm-read-common msg-count">0</span><span style="font-size:12px;">条留言</span></div>
				</template>
				
				<div style="clear:both;"></div>
			</div>
			<div class="text-box">
				<p class="t_face">
					<a href="javascript:;" class="t_face_btn">
						<img src="<c:url value='/resources/emoji/images/face/cza_thumb.gif'/>" alt="表情" width="22" height="22" />
					</a>
				</p>
				<!--emoji-->
				<div class="t_face_con">
				</div>
				<!-- <textarea class="write-message"  id="textarea-msg" maxlength="200" placeholder="交流心得..." style="font-size: 18px;" cols="80" rows="5"></textarea> -->
				<div class="write-message" id="textarea-msg"  contenteditable="true">
				</div>
				
				<!-- <div class="word-limit"><span id="word-count">0</span>/200</div> -->
			</div>
			<p class="btn-box">
				<a class="ok-btns" @click="login" href="javascript:void(0);">发布</a>
				<div style="clear: both;"></div>
			</p>
			
			<div class="message-wrap message-w-box">
				<div class="message-cnt-area" v-for="message in messageList" >
						<div class="reply-status" v-if="message.isReply=='no'">等待站长回复</div>
    					<div class="reply-status" style="background: #63C30A;" v-else>已回复</div>
						<div class="my-message-info">
							<p class="my-title" style="text-align: left;color:#ADADAD;">我的留言：</p>
							<div class="msg-cnt">{{{message.content | v.unescape}}}</div>
							<p style="text-align: right;color: #B5B5B5;">{{message.messageTime}}</p>
						</div>
						<div class="reply-message-info" v-if="message.isReply!='no'">
							<p class="my-title" style="text-align: left;color:#52B94C;">
								<svg class="icon chuizhicenter" aria-hidden="true">
								  <use xlink:href="#icon-youxian"></use>
								</svg>
							站长回复：</p>
							<div class="msg-cnt" style="color:#FFA500;">{{message.replyContent}}</div>
							<p style="text-align: right;color: #B5B5B5;">{{message.replyTime}}</p>
						</div>
					</div>
					<div class="comm-null-wrap" v-if="messageCount=0">
						您还没有留言哟！
					</div>
			</div>
	
		</div>
	</div>
	<div class="footer" style="color:#C7C4C4;">@Tony - 陕西西安高新区...</div> 
	<div class="canvas_box">
		<canvas id="Mycanvas"></canvas>
	</div>
</div>
	<script type="text/javascript" src="<c:url value='/resources/js/canvas_bg.js'/>"></script>
	
	<script type="text/javascript">
$(function(){
		// 点击显示表情
		$(".t_face_btn").on("click",function(){
			$(".t_face_con").removeClass("animated bounceOutLeft");
			$("#q_ul").remove();
			$.gnEmoji.showEmoji();
		});

		$(document).on("click",function(){
			if($(".t_face_con #q_ul").hasClass("animated swing"))
				$(".t_face_con").addClass("animated bounceOutLeft");
		});

		$(".t_face").on("click",function(e){
			e.stopPropagation();
		});

	$(".u-message .write-message").html("");
	$(".my-comment textarea").val("");
	

	//这是一个非常简单的demo实例，让列表元素分页显示
	//回调函数的作用是显示对应分页的列表项内容
	//回调函数在用户每次点击分页链接的时候执行
	//参数page_index{int整型}表示当前的索引页
	var initPagination = function() {
		var num_entries = $(".i-lists li").length;
		// 创建分页
		$("#Pagination").pagination(num_entries, {
			num_edge_entries: 6, //边缘页数
			num_display_entries: 4, //主体页数
			callback: pageselectCallback,
			items_per_page:2 //每页显示1项
		});
	 }();
	 
	function pageselectCallback(page_index, jq){
		var new_content = $(".i-lists li:eq("+page_index+")").clone();
		$("#Searchresult").empty().append(new_content); //装载对应分页的内容
		return false;
	}
});
</script>

<script type="text/javascript" src="<c:url value='/resources/js/user_message.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/base/gnmain.js'/>"></script>
			<script type="text/javascript">
			
			$(function(){
				$(".wx-nav .index").css({background:"orange",color:"#fff"});
				 $.ajax({
					url:"<c:url value='/rest/user.message.find.list/${curr_user.userid}'/>",
					method:"GET",
					data:null,
					success:function(e){
						$(".msg-count").html(e.length);
					},
					error:function(e){
						console.log("user message find all error...");
					}
				}); 
				
				
				var msgData={
						"id":"000009",
						"uid":"${curr_user.userid}",
						"userName":"${curr_user.username}",
						"content":"",
						"messageTime":"2016-02-12",
						"isReply":"no"
				};
				
				/*$(".ok-btns").on("click",function(){
					msgData.content=$(".u-message .write-message").text();
					console.log("data:"+JSON.stringify(msgData));
					//userMessage.addMessage("<c:url value='/rest/user.message.save'/>",msgData);
					
				});*/
				
			});
				
				/* $("#ok-btns").on("click",function(){
					console.log("data2:"+JSON.stringify(msgData));
					userMessage.addMessage(msgData);
				}) */
			</script>
			
</body>
</html>
